import 'package:flutter/material.dart';
import 'package:multi_dropdown/multiselect_dropdown.dart';
import 'package:vdrag_saas/Utils.dart';
import 'package:vdrag_saas/bus.dart';
import 'package:vdrag_saas/config.dart';

class DropdownOptions extends StatefulWidget {
  List<ValueItem> initList = [];
  String hint;
  String? url = "";
  Function() onSort;
  DropdownOptions(
      {super.key,
      required this.initList,
      required this.hint,
      required this.onSort,
      this.url = ""});

  @override
  State<StatefulWidget> createState() => _DropdownOptions();
}

class _DropdownOptions extends State<DropdownOptions> {
  List<ValueItem> options = [];

  @override
  void initState() {
    options = widget.initList;
    super.initState();
  }

  Widget buildNetWorkOptions(BuildContext context) {
    double d_height = options.isNotEmpty ? options.length * 45 : 30;
    bool isMobile = Utils.isMobile(context);
    ValueItem first = const ValueItem(label: '全部', value: 999);
    return SizedBox(
      // padding: const EdgeInsets.only(left: 10, right: 10),
      height: 36,
      width: 130,
      child: MultiSelectDropDown<dynamic>.network(
        networkConfig: NetworkConfig(
          url: widget.url ?? "",
          method: RequestMethod.get,
          headers: {
            'Content-Type': 'application/json',
          },
        ),
        responseParser: (response) {
          List<Map<String, dynamic>> data =
              List<Map<String, dynamic>>.from(response['data']);
          List<ValueItem> types = [];
          types.add(first);
          for (var row in data) {
            types.add(
                ValueItem(label: row['attributes']['name'], value: row['id']));
          }
          return Future.value(types);
        },
        responseErrorBuilder: (BuildContext context, item) {
          return const Text('类型请求错误');
        },
        onOptionSelected: (List<ValueItem> selectedOptions) {
          ValueItem item = selectedOptions[0];
          Global.type = item.label;
          widget.onSort();
          Global.searchTagKey.currentState?.onChange();
        },
        // fieldBackgroundColor: const Color(0xfff101f1),
        // dropdownBackgroundColor: const Color(0xfff01f1f1),
        // searchBackgroundColor: const Color(0xff01f1f1),
        selectedOptions: [first],
        selectionType: SelectionType.single,
        chipConfig: const ChipConfig(wrapType: WrapType.wrap),
        hint: widget.hint,
        hintColor: const Color.fromARGB(255, 102, 102, 102),
        hintFontSize: 12,
        // padding: const EdgeInsets.only(left: 10, right: 10),
        borderRadius: 5,
        borderWidth: isMobile ? 0 : 1,
        borderColor:
            isMobile ? Colors.white : const Color.fromARGB(255, 204, 204, 204),
        suffixIcon: const Icon(Icons.keyboard_arrow_up,
            color: Color.fromARGB(255, 204, 204, 204), size: 15),
        clearIcon: null,
        inputDecoration: BoxDecoration(
          border: Border.all(
            width: isMobile ? 0 : 1,
            color: isMobile
                ? Colors.transparent
                : const Color.fromARGB(255, 204, 204, 204),
          ),
          borderRadius: BorderRadius.circular(5),
          color: const Color(0xfff1f1f1),
        ),
        // dropdownHeight: d_height,
        optionTextStyle: const TextStyle(
            fontSize: 12, color: Color.fromARGB(255, 102, 102, 102)),
        selectedOptionIcon: const Icon(Icons.check, size: 14),
        selectedOptionTextColor: const Color.fromARGB(255, 64, 158, 255),
        selectedOptionBackgroundColor: const Color(0xffECF0F4),
        dropdownBorderRadius: 10,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    if (widget.url!.isNotEmpty) {
      return buildNetWorkOptions(context);
    }
    double d_height = options.isNotEmpty ? options.length * 45 : 30;
    bool isMobile = Utils.isMobile(context);
    // 下拉列表
    return SizedBox(
      // padding: const EdgeInsets.only(left: 10, right: 10),
      height: 36,
      width: 130,
      child: MultiSelectDropDown<dynamic>(
        onOptionSelected: (List<ValueItem> selectedOptions) {
          ValueItem item = selectedOptions[0];
          Global.sortId = item.value;
          widget.onSort();
        },
        selectedOptions: [options[0]],
        options: options,
        selectionType: SelectionType.single,
        chipConfig: const ChipConfig(wrapType: WrapType.wrap),
        hint: widget.hint,
        hintColor: const Color.fromARGB(255, 102, 102, 102),
        hintFontSize: 12,
        padding: const EdgeInsets.only(left: 10, right: 10),
        borderRadius: 5,
        borderWidth: isMobile ? 0 : 1,
        fieldBackgroundColor: const Color(0xfff9f9f9),
        dropdownBackgroundColor: const Color(0xfff9f9f9),
        searchBackgroundColor: const Color(0xfff9f9f9),
        borderColor:
            isMobile ? Colors.white : const Color.fromARGB(255, 204, 204, 204),
        suffixIcon: const Icon(Icons.keyboard_arrow_up,
            color: Color.fromARGB(255, 204, 204, 204), size: 15),
        clearIcon: null,
        inputDecoration: BoxDecoration(
          border: Border.all(
            width: isMobile ? 0 : 1,
            color: isMobile
                ? Colors.transparent
                : const Color.fromARGB(255, 204, 204, 204),
          ),
          borderRadius: BorderRadius.circular(5),
          color: const Color(0xfff1f1f1),
        ),
        dropdownHeight: d_height,
        optionTextStyle: const TextStyle(
            fontSize: 12, color: Color.fromARGB(255, 102, 102, 102)),
        selectedOptionIcon: const Icon(Icons.check, size: 14),
        selectedOptionTextColor: const Color.fromARGB(255, 64, 158, 255),
        selectedOptionBackgroundColor: const Color(0xffECF0F4),
        dropdownBorderRadius: 10,
      ),
    );
  }
}
